const React = require('react');
const {View, StyleSheet, Alert} = require('react-native');
const {
    JDDevice,
    JDText,
    JDRouter,
    JDTouchable,
    JDLocation,
    JDNativeToast,
    JDScrollView
} = require('@areslabs/jdreact-core-lib');
const {NavigationBar} = JDRouter;

class JDLocationExample extends React.Component {
    render() {
        return (
            <View style={styles.wrapper}>
                <NavigationBar Title="JDLocation"/>
                <JDScrollView style={styles.body}>
                    <JDTouchable onPress={() => {
                        JDLocation.getCurrentPosition((result) => {
                            alert("getCurrentPosition success:" + JSON.stringify(result));
                        }, (code, reason) => {
                            alert("getCurrentPosition error, code" + code + ", reason:" + reason);
                        }, null);
                    }}>
                        <View style={styles.btn}>
                            <JDText style={styles.btnText}>获取当前定位</JDText>
                        </View>
                    </JDTouchable>

                    <JDTouchable onPress={() => {
                        this.watchId = JDLocation.watchPosition((result) => {
                            JDNativeToast.show("receive location change:" + JSON.stringify(result));
                        }, (error) => {
                            JDNativeToast.show("receive location error:" + JSON.stringify(error));
                        });
                    }}>
                        <View style={styles.btn}>
                            <JDText style={styles.btnText}>监听定位变化</JDText>
                        </View>
                    </JDTouchable>

                    <JDTouchable onPress={() => {
                        JDLocation.clearWatch(this.watchId);
                        JDNativeToast.show("clearWatch, id:" + this.watchId);
                    }}>
                        <View style={styles.btn}>
                            <JDText style={styles.btnText}>取消单个定位监听</JDText>
                        </View>
                    </JDTouchable>

                    <JDTouchable onPress={() => {
                        JDLocation.stopObserving();
                        JDNativeToast.show("stopObserving");
                    }}>
                        <View style={styles.btn}>
                            <JDText style={styles.btnText}>取消定位监听</JDText>
                        </View>
                    </JDTouchable>
                    <JDTouchable onPress={() => {
                        JDLocation.requestLocationPermission(() => {
                            JDNativeToast.show("success");
                        }, () => {
                            JDNativeToast.show("no permission");
                        });
                    }}>
                        <View style={styles.btn}>
                            <JDText style={styles.btnText}>请求定位权限</JDText>
                        </View>
                    </JDTouchable>
                </JDScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    wrapper: {
        flex: 1
    },
    body: {
        flex: 1,
        padding: JDDevice.getRpx(20)
    },
    btn: {
        borderRadius: JDDevice.getDpx(4),
        backgroundColor: '#f23030',
        justifyContent: 'center',
        alignItems: 'center',
        height: JDDevice.getRpx(80),
        marginBottom: JDDevice.getRpx(20)
    },
    btnText: {
        color: '#FFF'
    }
});

module.exports = JDLocationExample;